<template>
  <div>
    <div class="hotel-container">
      <div class="hotel-header clearFix">
        <p class="hotel-header-left">酒店推荐</p>
        <ul class="hotel-header-right">
          <li v-for="(item,index) in cityList" :key="index" @click="changeHotel(item.id)"> {{item.city_name}}  </li>
        </ul>
      </div>
      <!-- 酒店信息主题区域 -->
      <div class="hotel-body clearFix">
        <!-- 酒店卡片 -->
        <ul class="hotel-cart" >

          <li class="hotel-cart-item"  v-for="(item,index) in cityHotellist" :key="index" >
            <a href="###" class="inner">
              <!-- 图片 -->
              <p class="img-box">
                <img class="img-box-image" :src="item.hotel_img">
              </p>
              <!-- 标题 -->
              <p class="hotel-title">{{item.hotel_name}}</p>
              <div class="comm_box">
                <p class="common-score">
                  <span>4.8</span>超棒
                </p>
                <p class="common-com">{{item.hotel_comment}}评论</p>
              </div>
              <p class="inner-address">{{item.hotel_address}}</p>
              <p class="inner-price">￥{{item.hotel_price}}起</p>
            </a>
          </li>

        </ul>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getCityList, getCityHotelList } from '@/api/city'
// import HotelInfo from './hotelInfo.vue'
export default {
  name: 'HotelSystemIndex',
  // components: { HotelInfo },
  // props: ['id'],
  data () {
    return {
      cityList: [], // 城市列表
      cityId: 1, // 当前城市所对应的所有酒店信息
      cityHotellist: [] // 酒店对应城市信息
    }
  },

  mounted () {
    this.getCity()
    this.getHotel(this.cityId)
  },

  methods: {
    // 获取城市列表
    async  getCity () {
      const { data: res } = await getCityList()
      // console.log(res)
      this.cityList = res.data
    },
    async getHotel (id) {
      const { data: { data: res } } = await getCityHotelList(id)
      // console.log(res)
      this.cityHotellist = res.hotels
      // console.log(this.cityHotellist)
    },
    async changeHotel (cityId) {
      this.cityId = cityId
      // console.log(cityId)
      this.getHotel(this.cityId)
    }
  }
}
</script>

<style lang="less" scoped>
html {
  box-sizing: border-box;
}

.hotel-container {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 20px;

  // 头部推荐模块
  &>.hotel-header {
    width: 100%;
    height: 50px;
    // background-color: green;

    .hotel-header-left {
      float: left;
      font-size: 24px;
      color: #000;
      line-height: 50px;
      margin-right: 22px;
    }

    .hotel-header-right li {
      display: inline;
      float: left;
      height: auto;
      line-height: 60px;
      margin-right: 22px;
      color: #666;
      vertical-align: bottom;
      font-size: 15px;
      cursor: pointer;

      &>a {
        cursor: pointer;
        text-decoration: none;
      }

      &:hover {
        color: #00afd2;
      }
    }

  }

  // 酒店信息主题模块
  .hotel-body {
    width: 1200px;

    height: 500px;
    margin-top: 20px;

    &>.hotel-cart {
      list-style: none;
      display: flex;
      justify-content: space-between;

      .hotel-cart-item {
        width: 280px;
        height: 350px;
        float: left;
        margin: 0 15px 15px 0;

        border-radius: 8px;

        .inner {
          display: block;
          width: 280px;
          height: 340px;
          position: relative;
          border-radius: 8px;
          list-style: none;
          text-decoration: none;
          background-color: #eaeaea;
          .img-box {
            width: 280px;
            height: 210px;
            margin-bottom: 10px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              border-radius: 8px;
            }
          }

          .hotel-title {
            padding: 0 10px 6px;
            width: 270px;
            font-size: 18px;
            line-height: 22px;
            color: #000;
          }

          .comm_box {
            padding: 0 10px 5px;
            line-height: 20px;

            .common-score {
              float: left;
              color: #00afc7;
              font-size: 14px;
              margin-right: 8px;

              span {
                font-size: 18px;
                margin-right: 2px;
              }
            }

            .common-com {
              font-size: 14px;
              color: #616161;
            }
          }

          .inner-address {
            height: 20px;
            padding: 0 10px 8px;
            font-size: 14px;
            color: #616161;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .inner-price {
            position: absolute;
            bottom: 9px;
            right: 10px;
            line-height: 32px;
            font-size: 22px;
            color: #ff714a;
          }
        }

        .inner:hover {
          box-shadow: 3px 3px 10px lightgray;
        }

      }

      .hotel-cart-item:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
